import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:meco/common/index.dart';
import 'package:dotted_border/dotted_border.dart';

import 'index.dart';

class UploadPage extends GetView<UploadController> {
  const UploadPage({super.key});

  // 构建页面头部
  Widget _buildHeader() {
    return Padding(
      padding: EdgeInsets.only(top: 20.h, left: 20.w),
      child: Row(
        children: [
          GestureDetector(
            onTap: () => Get.back(),
            child: Icon(
              IconFontIcons.iconBack,
              color: Colors.white,
              size: 24.sp,
            ),
          ),
          Expanded(
            child: Center(
              child: Text(
                "Release",
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 20.sp,
                  fontWeight: FontWeight.w400,
                ),
              ),
            ),
          ),
          SizedBox(width: 40.w), // 平衡左侧返回按钮的空间
        ],
      ),
    );
  }

  // 构建图片上传区域
  Widget _buildImageUpload() {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 24.w),
      child: GestureDetector(
        onTap: () => controller.pickImage(),
        child: DottedBorder(
          borderType: BorderType.RRect,
          radius: Radius.circular(12.r),
          color: Colors.lightBlueAccent.withOpacity(0.5),
          strokeWidth: 3,
          dashPattern: const [5, 5],
          child: Container(
            height: 374.h,
            width: double.infinity,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(12.r),
            ),
            child: ClipRRect(
              borderRadius: BorderRadius.circular(12.r),
              child: Obx(
                () =>
                    controller.selectedImage.value != null
                        ? Image.file(
                          controller.selectedImage.value!,
                          fit: BoxFit.cover,
                        )
                        : Center(
                          child: Image.asset(
                            Images.addImage,
                            width: 58.w,
                            height: 58.h,
                          ),
                        ),
              ),
            ),
          ),
        ),
      ),
    );
  }

  // 构建简介输入区域
  Widget _buildIntroductionInput() {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 24.w, vertical: 20.h),
      child: DottedBorder(
        borderType: BorderType.RRect,
        radius: Radius.circular(12.r),
        color: Colors.lightBlueAccent.withOpacity(0.5),
        strokeWidth: 3,
        dashPattern: const [5, 5],
        child: Container(
          width: double.infinity,
          padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 8.h),
          decoration: BoxDecoration(borderRadius: BorderRadius.circular(12.r)),
          child: TextField(
            controller: controller.introductionController,
            maxLines: 3,
            style: TextStyle(
              color: Colors.white,
              fontSize: 16.sp,
              fontFamily: 'Inter',
            ),
            decoration: InputDecoration(
              hintText: 'Input Introduction',
              hintStyle: TextStyle(
                color: Colors.white.withOpacity(0.6),
                fontSize: 16.sp,
                fontFamily: 'Inter',
              ),
              border: InputBorder.none,
            ),
          ),
        ),
      ),
    );
  }

  // 构建确认按钮
  Widget _buildConfirmButton() {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 24.w),
      child: GestureDetector(
        onTap: () => controller.submitRelease(),
        child: Container(
          height: 50.h,
          width: double.infinity,
          decoration: BoxDecoration(
            color: const Color(0xFF60A5FA),
            borderRadius: BorderRadius.circular(25.r),
          ),
          child: Center(
            child: Text(
              'confirm',
              style: TextStyle(
                color: Colors.white,
                fontSize: 18.sp,
                fontWeight: FontWeight.bold,
                fontFamily: 'Inter',
              ),
            ),
          ),
        ),
      ),
    );
  }

  // 构建底部EULA
  Widget _buildEula() {
    return Padding(
      padding: EdgeInsets.only(top: 20.h, bottom: 30.h),
      child: Column(
        children: [
          Text(
            'EULA',
            style: TextStyle(
              color: Colors.white,
              fontSize: 14.sp,
              fontFamily: 'Inter',
              decoration: TextDecoration.underline,
              decorationColor: Colors.white,
            ),
          ),
        ],
      ),
    );
  }

  // 主视图
  Widget _buildView() {
    return Container(
      decoration: const BoxDecoration(
        image: DecorationImage(
          image: AssetImage(Images.startBg),
          fit: BoxFit.cover,
        ),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          SizedBox(height: 36.h),
          _buildHeader(),
          SizedBox(height: 30.h),
          _buildImageUpload(),
          _buildIntroductionInput(),
          const Spacer(),
          _buildConfirmButton(),
          _buildEula(),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return GetBuilder<UploadController>(
      init: UploadController(),
      id: "upload",
      builder: (_) {
        return Scaffold(
          body: SafeArea(top: false, bottom: false, child: _buildView()),
        );
      },
    );
  }
}
